<template>
  <div class="tab_review">
    <div class="tab_inner">
      <div class="category"
           ref="categoryRef">
        <div class="category_item"
             v-for="(item, index) in reviewStatus"
             :class="{current: activeIndex == index}"
             :key="index"
             @click="changeActiveIndex(index)">{{item.label}}</div>
      </div>
      <div class="main">
        <!-- <div class="filter_header"></div> -->
        <div class="main_inner"
             v-if="renderList.length != 0">
          <!-- <div class="plugin_item"
               v-for="(item, index) in renderList"
               :key="index">
            <div class="plugin_item_icon">
              <img :src="item.logo ? item.logo : $localImage('icon.png')"
                   alt="">
            </div>
          </div> -->
          <Table :columns="column"
                 border
                 :data="renderList"></Table>
        </div>
        <transition name="fade">
          <div class="tab_empty"
               v-if="renderList.length == 0">
            <svg>
              <use xlink:href="#icon-empty"></use>
            </svg>
          </div>
        </transition>
      </div>
    </div>

    <Modal v-model="reviewModal.shown"
           title="插件审核"
           @on-ok="review"
           @on-cancel="closeReviewModal">
      <div class="review_item">
        <div class="review_item_label">插件名称</div>
        <div class="review_item_value"
             v-text="reviewModal.data.pluginName + '@' + reviewModal.data.version"></div>
      </div>
      <div class="review_item">
        <div class="review_item_label">插件类别</div>
        <div class="review_item_value">
          <Select v-model="reviewModal.data.category">
            <Option v-for="(item) in categories"
                    :key="item.id"
                    :value="item.id"
                    :label="item.label">{{item.label}}</Option>
          </Select>
        </div>
      </div>
      <div class="review_item">
        <div class="review_item_label">是否通过</div>
        <div class="review_item_value">
          <i-switch v-model="reviewModal.data.status"
                    size="large"
                    true-color="#13ce66"
                    false-color="#ff4949"
                    :true-value="1"
                    :false-value="-1">
            <span slot="open">同意</span>
            <span slot="close">拒绝</span>
          </i-switch>
        </div>
      </div>
      <transition name="fade">
        <div class="review_item"
             v-if="reviewModal.data.status == -1">
          <div class="review_item_label">理由</div>
          <div class="review_item_value">
            <Input placeholder="请输入拒绝原因"
                   v-model="reviewModal.data.errmsg"></Input>
          </div>
        </div>
      </transition>
    </Modal>
  </div>
</template>

<script>
import { Switch, Table, Button, Modal, Input, Select, Option } from 'view-design'
import { createNamespacedHelpers, mapState } from 'vuex'
const { mapActions } = createNamespacedHelpers('./store/modules')
export default {
  name: 'Review',
  components: {
    iSwitch: Switch,
    Table, Button, Modal, Input, Select, Option
  },
  props: {
    activeTab: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // categories: [],
      reviewModal: {
        shown: false,
        data: {
          id: '',
          pid: '',
          pluginName: '',
          version: '',
          errmsg: '',
          status: 1,
          category: ''
        }
      },
      list: [], // 未审核列表
      rejectiveList: [], // 已拒绝列表
      acceptiveList: [], // 已通过列表
      activeIndex: 0,
      reviewStatus: [
        {
          label: '未审核',
          value: 0
        },
        {
          label: '已通过',
          value: 1
        },
        {
          label: '未通过',
          value: -1
        }
      ],
      viewStatus: {},
    }
  },
  computed: {
    ...mapState(
      {
        categories: (state) => state.moduleCategory.categories,
        loginInfo: (state) => state.moduleUser.userInfo
      }
    ),
    renderList () {
      let _list = []
      switch (this.activeIndex) {
        case 0:
          _list = JSON.parse(JSON.stringify(this.list))
          break
        case 1:
          _list = JSON.parse(JSON.stringify(this.acceptiveList))
          break
        case 2:
          _list = JSON.parse(JSON.stringify(this.rejectiveList))
          break
        default:
          break
      }
      return _list
    },
    column () {
      return [
        {
          type: 'index',
          width: 50,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '插件名称',
          key: 'pluginName',
          width: 100,
          fixed: 'left'
        },
        {
          title: '版本号',
          key: 'version',
          width: 80
        },
        {
          title: '插件大小',
          key: 'size',
          width: 100,
          render: (h, params) => {
            return h('div', {}, this.$sizeFormat(params.row.size))
          }
        },
        {
          title: 'logo',
          key: 'logo',
          width: 80,
          render: (h, params) => {
            return h('div', {
              style: {
                width: '56px',
                height: '56px',
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center'
              }
            }, [
              h('img', {
                attrs: {
                  src: params.row.logo
                },
                style: {
                  width: '48px',
                  height: '48px',
                  borderRadius: '5px',
                  overflow: 'hidden'
                }
              })
            ])
          }
        },
        {
          title: '作者',
          key: 'author',
          width: 80
        },
        {
          title: '提审时间',
          key: 'updatedAt',
          width: 120,
          render: (h, params) => {
            return h('div', {}, this.$timeFormat2(new Date(params.row.updatedAt).getTime()))
          }
        },
        {
          title: '描述',
          key: 'description',
          width: 180
        },
        {
          title: '预览',
          key: 'url',
          fixed: 'right',
          width: 100,
          render: (h, params) => {
            let _hash = (params.row.url.indexOf('?') > 0 ? ('_' + params.row.url.split('?')[1]) : '')
            if (this.viewStatus[params.row.pid + _hash] && this.viewStatus[params.row.pid + _hash].action == 'downloading') {
              return h('a', {}, this.viewStatus[params.row.pid + _hash].percent.toFixed(2) + '%')
            } else {
              return h('a', {
                href: '',
                on: {
                  click: () => {
                    let _d = Object.assign({}, params.row, {
                      features: params.row.features || {}
                    })
                    bbtools.send('rfc-view', _d)
                  }
                }
              }, '预览')
            }
          }
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 120,
          render: (h, params) => {
            if (this.activeIndex == 0) {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.openReviewModal(params.row)
                    }
                  }
                }, '审核')
              ]);
            } else if (this.activeIndex == 1) {
              // return h('div', [
              //   h('Button', {
              //     props: {
              //       type: 'primary',
              //       size: 'small',
              //       readonly: true
              //     },
              //     style: {
              //       marginRight: '5px'
              //     },
              //     on: {
              //     }
              //   }, '已通过')
              // ]);
              return h('div', {
                style: {
                  color: 'darkgreen',
                  fontWeight: 'bold'
                }
              }, '已通过')
            } else {
              // return h('div', [
              //   h('Button', {
              //     props: {
              //       type: 'primary',
              //       size: 'small',
              //       disabled: true
              //     },
              //     style: {
              //       marginRight: '5px'
              //     },
              //     on: {
              //     }
              //   }, '已拒绝')
              // ]);
              return h('div', {
                style: {
                  color: '#ff9900',
                  fontWeight: 'bold'
                }
              }, '已拒绝' + (params.row.errmsg ? `【${params.row.errmsg}】` : ''))
            }
          }
        }
      ]
    }
  },
  watch: {
    activeTab: {
      immediate: true,
      handler (val) {
        if (val == 'Review') {
          this.initList()
          // this.initCategories()
        }
      }
    }
  },
  mounted () {
    // this.$nextTick(() => {
    bbtools.on('rfc-list-response', this.rfcListResponse)
    bbtools.on('rfc-review-response', this.rfcReviewResponse)
    //   bbtools.on('rfc-view-response', this.rfcViewResponse)
    // })
  },
  methods: {
    rfcViewResponse (event, response) {
      if (response.action == 'done') {
        if (this.viewStatus[response.id]) {
          delete this.viewStatus[response.id]
        }
      } else {
        this.$set(this.viewStatus, response.id, response)
      }
    },
    initCategories () {
      let response = bbtools.sendSync('category-list')
      if (response.status == 200) {
        this.categories = response.data?.list || []
      }
    },
    initList (status = 0) {
      bbtools.send('rfc-list', {
        status: status,
        phonenum: this.loginInfo.phonenum,
        token: this.loginInfo.token
      })
    },
    rfcListResponse (event, reviewPlugins) {
      if (reviewPlugins.data && (reviewPlugins.code == 200)) {
        if (reviewPlugins.data.needLogin) {
          eventBus.$emit('tab-change', {
            name: 'Profile',
            urlParams: {
              action: 'login'
            }
          })
        } else if (reviewPlugins.data.needRegister) {
          eventBus.$emit('tab-change', {
            name: 'Profile',
            urlParams: {
              action: 'register'
            }
          })
        } else {
          switch (this.activeIndex) {
            case 0:
              this.list = reviewPlugins.data.list || []
              break
            case 2:
              this.rejectiveList = reviewPlugins.data.list || []
              break
            case 1:
              this.acceptiveList = reviewPlugins.data.list || []
              break
            default:
              break
          }
        }
      }
    },
    changeActiveIndex (index) {
      this.activeIndex = index
      this.initList(this.reviewStatus[index].value)
    },
    gotoTabPlugins (e) {
      e.preventDefault()
      this.$emit('tab-change', {
        name: 'Plugins'
      })
    },
    openReviewModal (data) {
      this.reviewModal = {
        shown: true,
        data: Object.assign({}, this.reviewModal.data, data, {
          status: 1,
          errmsg: ''
        })
      }
    },
    closeReviewModal () {
      this.reviewModal = {
        shown: false,
        data: {
          id: '',
          pid: '',
          pluginName: '',
          version: '',
          category: '',
          status: 1,
          errmsg: ''
        }
      }
    },
    review () {
      if (!this.loginInfo.token) {
        this.$emit('tab-change', {
          name: 'Profile',
          urlParams: {
            action: 'login'
          }
        })
        return
      }

      bbtools.send('rfc-review', Object.assign({}, this.reviewModal.data, {
        phonenum: this.loginInfo.phonenum,
        token: this.loginInfo.token
      }))
    },
    rfcReviewResponse (event, response) {
      if (response.code != 200) {
        this.$Message.error({
          content: response.message,
          duration: 5
        })
      } else {
        this.initList()
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import url("../themes/index.less");
.tab_review {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  .tab_inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    .category {
      width: 100px;
      height: calc(~"100% - 36px");
      background-color: lighten(@darkDividerColor, 85);
      box-shadow: -20px -5px 22px -22px rgba(217, 217, 217, 0.8) inset;
      padding-top: 20px;
      box-sizing: border-box;
      &_item {
        width: 100%;
        height: 48px;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: @darkTextColor1;
        &.current {
          background-color: @activeBgColor;
          color: @darkPrimaryColor;
          font-weight: bold;
          // background-color: #eee;
        }
      }
    }
    .main {
      position: relative;
      width: calc(~"100% - 100px");
      height: calc(~"100% - 36px");
      overflow-y: auto;
      // .filter_header {
      //   width: 100%;
      //   height: 48px;
      //   background-color: red;
      // }
      &_inner {
        width: 100%;
        // height: calc(~"100% - 48px");
        height: 100%;
        padding: 10px 0;
        box-sizing: border-box;
        .plugin_item {
          width: 100%;
          height: 64px;
          margin-bottom: 10px;
          padding: 0 20px;
          box-sizing: border-box;
          &_icon {
            width: 64px;
            height: 64px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            img {
              width: 36px;
              height: 36px;
              object-fit: cover;
            }
          }
        }
      }
    }
  }
  .tab_empty {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    svg {
      width: 56px;
      height: 56px;
      fill: @darkTextColor4;
    }
    .empty_info {
      width: 100%;
      height: 32px;
      margin-top: 8px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      .empty_info_text {
        color: @darkTextColor4;
      }
    }
  }
}
.review_item {
  width: 100%;
  height: 36px;
  display: flex;
  flex-direction: row;
  align-items: center;
  &_label {
    width: 80px;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: @darkTextColor3;
  }
  &_value {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: @darkTextColor2;
  }
}
</style>
